<template>
	<view class="card-wrap">
		<view class="card-inner">
			<view class="card-info">
				<text>{{title}}</text>
				<view class="viewButton" @click="seeQuestionnaire">
					查看问卷
				</view>
			</view>
			<view class="content">
				<text class="share">分享</text>
				<view class="share-card">
					<uni-icons class="icon" type="paperclip" size="25"></uni-icons>
					<text class="url scrollBar">{{url}}</text>
					<view class="copy">
						<text @click="copyClick()">复制</text>
					</view>
				</view>
				<view class="share-card" @click="viewTheActivitiesQrCode">
					<uni-icons class="icon" type="image" size="25"></uni-icons>
					<text>查看活动二维码</text>
				</view>
				<view class="share-card">
					<uni-icons class="icon" type="redo-filled" size="25"></uni-icons>
					<button class="forwarding" open-type="share">转发</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { empty } from '../../../uni_modules/uv-ui-tools/libs/function/test';
	export default {
		data() {
			return {
				formid:"",
				title:"",
				url:this.url,
				shareTitle:"",
				shareImg:"",
				share:false
			}
		},
		onLoad:function(data){
			this.formid = data.formid
			this.title = data.title
			this.url = this.url+'/preview.html?formid='+data.formid+'&type=answer'
			this.$request('/QuestionnaireSettingController/GetSettingsSharing','GET',{formid:this.formid})
			.then(res=>{
				console.log(res);
				if(res.data.data.is_allowed_to_share){
					this.share = true
					this.shareTitle = res.data.data.is_the_title
					this.shareImg = res.data.data.img_url
				}
			})
			 wx.showShareMenu({
				withShareTicket:this.share,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: this.shareTitle, //分享的名称
		        path: '/components/common/share/share?formid='+this.formid,
				imageUrl:this.shareImg,
		        // mpId:this.mpId //此处配置微信小程序的AppId
		    }
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title:this.shareTitle,
				path: '/components/common/share/share?formid='+this.formid,
		        imageUrl: this.shareImg,
		    }
		},
		methods: {
			viewTheActivitiesQrCode(){
				uni.navigateTo({
					url:'/components/common/viewTheActivitiesQrCode/viewTheActivitiesQrCode?formid='+this.formid+'&title='+this.title
				})
			},
			seeQuestionnaire(){
				console.log();
				uni.navigateTo({
					url:"/components/common/share/share?formid="+this.formid
				})
			},
			 copyClick(){
				if (!empty(this.url)) {
					uni.setClipboardData({
						data: this.url, //当前点击的地址
						success: () => {
							//获取刚复制好的地址到剪切板，
							uni.getClipboardData({
								success: () => {
									uni.showToast({
										title: '复制成功',
										icon:"none"
									})
								}
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.query{
		width: 100vw;
		height: 100vh;
		background-color: #dcdcdc;
	}
	.card-wrap {
	  width: 100%;
	  height: 100vh;
	  background-color: #eeeeee;
	  position: relative;
	  z-index: 1;
	  overflow: hidden;
	}

	.card-wrap:after {
	  width: 130%;
	  height: 20vh;
	  position: absolute;
	  /* 将left设为（100%-宽度）/ 2 */
	  left: -15%;
	  top: 0;
	  z-index: -1;
	  content: '';
	  border-radius: 0 0 50% 50%;
	  // background: linear-gradient(144deg, #da7b4d 0%, #57c2b8 100%);
	  background-color: #80b156;
	}

	.card-inner {
	  position: absolute;
	  top: 7vh;
	  width: 100%;
	  .content{
		.share{
			display: flex; 
			margin: 20px auto 10px 20px;
			font-size: 14px;
			color: #a8a5b9;
		}
		.share-card{
			width: 92%;
			background-color: white;
			height: 10vh;
			margin: auto;
			margin-top: 10px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			.icon{
				margin-left: 30rpx;
				margin-right: 10rpx;
			}
			.url{
				width: 60%;
				font-size: 14px;
				overflow-x: auto;
			}
			.copy{
				width: 18%;
				height: 5vh;
				margin-left: 20rpx;
				border: 1px solid #dfdfdf;
				border-radius: 5px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #efefef;
				color: #7777a0;
			}
		}
	  }
	}

	.card-info {
	  margin: auto;
	  width: 92%;
	  height: 130px;
	  display: flex;
	  background: #ffffff;
	  box-shadow: 0 4px 8px 0 rgba(190, 195, 199, 0.5);
	  border-radius: 8px;
	  text{
		  margin: 20px;
		  font-size: 18px;
		  font-weight: bold;
	  }
	  .viewButton{
		  position: absolute;
		  text-align: center;
		  width: 200rpx;
		  top: 70px;
		  left: 35px;
		  border: 1px solid #80b156;
		  border-radius: 10px;
		  color: #80b156;
	  }
	}
	
	.scrollBar::-webkit-scrollbar{
		display: none;
	}
	button {
		width: 80%;
		display: flex;
		background-color: white;
	    margin: unset;
	    padding: unset;
	}
	button:after {
		border: unset;
	}

</style>
